<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>秒杀请求排队中</title>
    <!-- jquery -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css"/>
    <!-- layer -->
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
</head>
<body>
您已秒杀<span th:text="${goods.goodsName}">null</span><br>
正在等待秒杀结果返回...<br>
<input type="hidden" id="goodsId" th:value="${goods.goodsId}">

<Button type="button" onclick="onOrderQuery()">手动查询秒杀结果</Button>


<script>

  function onOrderQuery(){
     $.ajax({
         type:'POST',
         url:'/seckill/getResult',
         data:{
             goodsId: $('#goodsId').val()
         },
         success:function(res){
             let status  = res.data
             if(status==-1){
                  layer.alert("商品库存不足，秒杀失败")
             }else if(status==0){
                 layer.alert("请耐心等待...")
                 setTimeout(onOrderQuery,1000);
             }else{
                 layer.confirm("秒杀成功了，是否查看订单",{btn:['确定','取消']},()=>{
                     window.location.href=`/seckill/getOrder?orderId=${status}`
                 },()=>{
                     layer.close()
                 })
             }
         }
     })
  }


</script>

</body>
</html>